<!DOCTYPE html>
<!--[if IE 7 ]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta name="description" content="">
<meta name="author" content="">

<title>My Tracker</title>

<link rel="stylesheet" href="dataTable/css/demo_table.css" />
<link href="../css/default.css" rel="stylesheet" type="text/css"
	media="all" />
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css"
	type="text/css" />
<link rel="stylesheet" href="../css/nivo-slider.css" type="text/css"
	media="screen" />
<link rel="stylesheet" href="../css/slidestyle.css" type="text/css"
	media="screen" />
<link rel="stylesheet" href="../css/themes/default/default.css"
	type="text/css" media="screen" />
<!--[if lt IE 9]>
	    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<script>
	window.jQuery
			|| document
					.write('<script src="js/jquery-1.6.1.min.js"><\/script>')
</script>
<script src="js/jquery-1.6.1.min.js"></script>
<script src="js/jquery.smoothscroll.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/jquery.easing-1.3.pack.js"></script>
<script src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script src="js/init.js"></script>
<script src="dataTable/js/jquery.dataTables.min.js"></script>


<style>
.innerDetails {
	padding: 20px;
	font-size: 18px;
	background-color: white;
}

.info {
	text-align: center;
	font-size: 2em;
	color: #0000CD;
	font-family: sans serif;
	font-weight: bold;
	height: 60px;
	background-color: #ADD8E6;
}

.edit:focus {
	background-color: lightyellow;
	border-style:outset;
}

#example {
	font-size: 18px;
	width: 120%;
	color: #113ED0;
	text-align: center;
	valign: middle;
}

#example thead {
	color: #003399;
	font-size: 15px;
	text-align: center;
}

.usertable {
	border: 3px solid black;
	border-collapse: collapse;
	padding: 5px;
	width: 380px;
	height: 280px;
}

.usertable tr {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 5px;
	valign: middle;
}

.usertable td {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 5px;
}

input[type="text"] {
	size: 30;
	font-size: 16px;
}

input[type="submit"] {
	size: 50;
	font-size: 25px;
}

.title {
	width: 150px;
	text-align: right;
}

#shift {
	margin-left: 10%;
}

.nonedit{
background: none repeat scroll 0 0 white;
    border-color: #F5F5F5;
    border-image: none;
    border-left: 0px none #F5F5F5;
    border-radius: 3px 3px 3px 3px;
    border-right: 0px none #F5F5F5;
    border-style: none;
    border-width: 0px;
}
</style>

<script type="text/javascript">
	function submitForm(button) {

		if (button.value == "Delete") {
			var r = confirm("Delete this user ?");
			if (r == true) {
				var frm = document.getElementById('tform');
				frm.action = "doaction";
			} else {
				window.location = "http://omnihtrack.appspot.com/userlist.html";
			}
		} else if (button.value == "Update") {
			var r = confirm("Have you configured the tracker before updating the information ?");
			if (r == true) {
				var frm = document.getElementById('tform');
				frm.action = "doaction";
			} else {
				window.location = "http://omnihtrack.appspot.com/userlist.html";
			}
		}
		else
			{return false;}
	}
</script>


</head>
<script type="text/javascript" charset="utf-8">
	$(document)
			.ready(
					function() {

						var oTable;
						/* Init the table */
						oTable = $('#example')
								.dataTable(
										{

											"bProcessing" : true,
											"bServerSide" : false,
											"sAjaxSource" : "./getuser",

											"aoColumns" : [
													{
														"mDataProp" : null,
														"sClass" : "control center",
														"sDefaultContent" : '<img src="images/Close.png">'
													},
													{
														"mData" : "role"
													},
													{
														"mData" : "phoneno"
													},
													{
														"mData" : "passcode"
													},
													{
														"mData" : "trackername"
													},
													{
														"mData" : "password"
													},
													{
														"mData" : "simno"
													},
													{
														"mData" : "imei"
													},
													{
														"mData" : "typeoftracker"
													}

											]

										});

						$('#example tbody td img')
								.live(
										'click',
										function() {
											var nTr = $(this).parents('tr')[0];
											if (oTable.fnIsOpen(nTr)) {

												this.src = "images/Close.png";
												oTable.fnClose(nTr);

											} else {
												this.src = "images/Open.png";

												var getData = oTable
														.fnGetData(nTr);

												var data = JSON
														.stringify(getData);

												var aReturn = new Array();
												aReturn = data.split(",");

												var dataUid = aReturn[1];
												var dataTrackername = aReturn[2];
												var dataPassword = aReturn[3];
												var dataSimno = aReturn[4];
												var dataImei = aReturn[5];
												var dataTypeoftracker = aReturn[6];
												var dataPhoneno = aReturn[7];
												var dataPasscode = aReturn[8];
												var dataRole = aReturn[9];

												var uid = dataUid.substring(6,
														dataUid.length);

												var trackername = dataTrackername
														.substring(
																15,
																dataTrackername.length - 1);
												var password = dataPassword
														.substring(
																12,
																dataPassword.length - 1);
												var simno = dataSimno
														.substring(
																9,
																dataSimno.length - 1);
												var imei = dataImei.substring(
														8, dataImei.length - 1);
												var typeoftracker = dataTypeoftracker
														.substring(
																17,
																dataTypeoftracker.length - 1);
												var phoneno = dataPhoneno
														.substring(
																11,
																dataPhoneno.length - 1);
												var passcode = dataPasscode
														.substring(
																12,
																dataPasscode.length - 1);
												var role = dataRole.substring(
														8, dataRole.length - 2);

												var sOut = '<form id="tform" method="get">'
														+ '<div class="innerDetails"><table style="margin-left:4%;"><tr><td colspan="2" style="color:red; font-size:15px; text-align:right;">* Editable</td></tr><tr><td>'

														+ '<table class="usertable" cellpadding="5" cellspacing="0" border="0" style="padding:10px;">'
														+ '<tr valign="middle"><td colspan="2" class="info">User Information</td></tr>'
														+ '<tr valign="middle"><td class="title">ID :</td><td><input class="nonedit" type="text" id="uid" name="uid" value="'+ uid + '" readonly/></td></tr>'
														+ '<tr valign="middle"><td class="title">Role :</td><td><input class="nonedit" type="text" id="role" name="role" value="'+ role + '" readonly/></td></tr>'
														+ '<tr valign="middle"><td class="title">Passcode :</td><td><input type="text" class="nonedit" id="passcode" name="passcode" value="'+ passcode + '" readonly/></td></tr>'
														+ '<tr valign="middle"><td class="title">Phone Number :</td><td><input class="edit" type="text" id="phoneno" name="phoneno" maxlength="8" value="'+ phoneno + '" />*</td></tr></table></td>'

														+ '<td><table class="usertable" cellpadding="5" cellspacing="0" border="0" style="padding:10px;">'
														+ '<tr valign="middle"><td colspan="2" class="info">Tracker Information</td></tr>'
														+ '<tr valign="middle"><td class="title">IMEI :</td><td><input type="text" id="imei" class="nonedit" name="imei" value="'+ imei + '"/ readonly></td></tr>'
														+ '<tr valign="middle"><td class="title">Type of Tracker :</td><td><input class="nonedit" type="text" id="typeoftracker" name="typeoftracker" value="'+ typeoftracker + '" readonly/></td></tr>'
														+ '<tr valign="middle"><td class="title">Tracker Name :</td><td><input class="edit" type="text" id="trackername" name="trackername" value="'+ trackername + '"/>*</td></tr>'
														+ '<tr valign="middle"><td class="title">Password :</td><td><input class="edit" type="text" id="password" name="password" maxlength="4" value="'+ password + '"/>*</td></tr>'
														+ '<tr valign="middle"><td class="title">Sim Number :</td><td><input class="edit" type="text" id="simno" name="simno" maxlength="8" value="'+ simno + '"/>*</td></tr>'
														+ '</table></td></tr>'

														+ '<tr><td colspan="2" style="text-align:center;"><input type="submit" name="action" value="Update" onclick="return submitForm(this)"/> &nbsp;&nbsp;&nbsp;&nbsp; <input type="submit" name="action" value="Delete" onclick="return submitForm(this)"/></td></tr>'
														+ '</tr></table><br/>'
														+ '<div id="note" style="font-size:12px;"><span style="color:red;">*Please configure tracker before changing its tracker name & password</span><br/>'
														+ 'SMS Format:<br/>Tracker Name : #username,password,1,new username*<br/>Password : #username,password,2,new password,new password*</div>'
														+ '</div></form>';

												oTable.fnOpen(nTr, sOut,
														'details');
												anOpen.push(nTr);
											}

										});

					});
</script>

<body>

	<div id="wrapper">
		<div id="header-wrapper">
				<div id="header" style="backgound-color: #0078D1;">
					<div id="logo">
						<h1>
							<a href="#">Omni-Health</a>
						</h1>
						<!-- <p>Pte Ltd</p> -->
					</div>
					<div id="menu">
						<ul id="mapnav">
						<li><a href="adminindex.html" accesskey="1" title="">Map</a></li>
					<li><a href="userlist.html">User List</a></li>
					<li><a href="AddUser.html">Add User</a></li>
						<li><a href="Login.html" accesskey="1" title="">Logout</a></li>
						</ul>
					</div>
				</div>
			</div>


		<div id="page-wrapper">
			<div id="page">
				<div id="content">
					<div id="shift">

						<table cellpadding="0" cellspacing="0" border="0" class="display"
							id="example" width="135%">
							<thead>
								<tr>
									<th></th>
									<th>Role</th>
									<th>User Phone Number</th>
									<th>Passcode</th>
									<th>Tracker Name</th>
									<th>Tracker Password</th>
									<th>Sim Card Number</th>
									<th>IMEI</th>
									<th>Tracker Type</th>
								</tr>
							</thead>
							<tbody style="font-size: 18px;">

							</tbody>

						</table>

					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- <div id="footer-wrapper">
		<div id="footer-content" align="center" style="padding:35px 0px 0px 0px;">
			<div class="slider-wrapper theme-default" style="width:800px; height:260px;" >
            <div id="slider" class="nivoSlider">
                <img src="images/header.jpg" data-thumb="images/header.jpg" alt="" />
                <img src="images/1.jpg" data-thumb="images/1.jpg" alt=""/>
                <img src="images/2.jpg" data-thumb="images/2.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/3.jpg" data-thumb="images/3.jpg" alt=""  />
				 <img src="images/4.jpg" data-thumb="images/4.jpg" alt="" />
				  <img src="images/5.jpg" data-thumb="images/5.jpg" alt=""  />
            </div>
        </div>

	</div>
</div> -->
	<div id="footer">
		<p>Copyright (c) by Nanyang Polytechnic.</p>
	</div>


</body>
</html>
